<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="请输入用户名或是移动号码" v-model="search.nickname"></el-input>
      <el-select @change='handleFilter' style="width: 200px" class="filter-item" v-model="search.unitname">
        <el-option label="全部" value=''></el-option>
        <el-option v-for="(item, index) in unitList" :key="index" :label="item.hotel_name" :value="item.id"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <!-- // 这是列表 -->
    <div style="color:#999;margin-bottom:3px">*注: 当天统计数据</div>
    <panel-group :panel-data="indexTop"></panel-group>
    <el-table :data="listData" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
      <el-table-column type="index"  align="center" width="45">
         <template slot-scope="scope">
          <span class="el-icon-star-on" style="color:#40c9c6;font-size:22px" v-if="scope.row.created_at>=getdatatime()"></span>
         </template>
     </el-table-column>
      <el-table-column type="index"  align="center" label="序号" width="80">
     </el-table-column>
      <el-table-column align="center" label="头像" width="80">
        <template slot-scope="scope">
          <span><img :src="scope.row.wx_avatar" style="width:60px;height:80px" onerror='this.src="http://wx.qlogo.cn/mmopen/C2rEUskXQiblFYMUl9O0G05Q6pKibg7V1WpHX6CIQaic824apriabJw4r6EWxziaSt5BATrlbx1GVzwW2qjUCqtYpDvIJLjKgP1ug/0"' /></span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="微信昵称">
        <template slot-scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="移动号码">
        <template slot-scope="scope">
          <span>{{scope.row.mobile}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="门牌号">
        <template slot-scope="scope">
          <span>{{scope.row.address}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="来源" width="80">
        <template slot-scope="scope">
          <el-tag type="draft">{{scope.row.source | sourceFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="归属点" width="180">
        <template slot-scope="scope">
          <el-tag type="warning">{{scope.row.hotel_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="最后登陆时间">
        <template slot-scope="scope">
          <span>{{scope.row.last_login}}</span>
        </template>
      </el-table-column>
      <!-- //这里是操作   -->
      <!-- <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status!='deleted'" size="mini" type="danger" @click="handlDel(scope.row,'deleted')">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!--可自定义按钮的样式、show/hide临界点、返回的位置  -->
    <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素  -->
    <el-tooltip placement="top" content="回到顶部">
      <back-to-top transitionName="fade" :customStyle="myBackToTopStyle" :visibilityHeight="300" :backPosition="50"></back-to-top>
    </el-tooltip>
  </div>
</template>

<script>

import waves from '@/directive/waves' // 水波纹指令
import BackToTop from '@/components/BackToTop' // 回到顶部
import * as api from '@/api/main-api' // API
import PanelGroup from './panelGroup'
import { mapGetters } from 'vuex'

export default {
  name: 'userList',
  directives: {
    waves
  },
  components: { BackToTop, PanelGroup },
  computed: {
    ...mapGetters([
      'outlet_id'
    ])
  },
  data() {
    return {
      // 回到顶部样式
      myBackToTopStyle: {
        right: '50px',
        bottom: '50px',
        width: '40px',
        height: '40px',
        'border-radius': '4px',
        'line-height': '45px', // 请保持与高度一致以垂直居中 Please keep consistent with height to center vertically
        background: '#e7eaf1'// 按钮的背景颜色 The background color of the button
      },

      listQuery: {
        page: 1,
        pagesize: 10
      },
      search: {
        // 搜索字段
        nickname: ''
      },
      indexTop: {
        new_member: 0,
        come_member: 0
      },
      total: 0,
      listLoading: false,
      listData: [],
      unitList: [],
      today: ''
    }
  },

  // 初始化数据
  mounted() {
    this.fetchData()
    this.getUnitList()
  },
  filters: {
    sourceFilter(status) {
      if (status === 1) {
        return 'H5'
      } else {
        return '小程序'
      }
    }
  },
  // 触动方法
  methods: {
    getdatatime() { // 默认显示今天
      var nowtime = new Date()
      var year = nowtime.getFullYear()
      var month = this.padleft0(nowtime.getMonth() + 1)
      var day = this.padleft0(nowtime.getDate())
      return year + '-' + month + '-' + day + ' ' + '00:00:00'
    },
    padleft0(obj) {
      return obj.toString().replace(/^[0-9]{1}$/, '0' + obj)
    },

    // 控制每页调数
    handleSizeChange(val) {
      this.listQuery.pagesize = val
      this.fetchData()
    },
    // 跳页
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.fetchData()
    },
    // 搜搜
    handleFilter() {
      // 分页初始值
      this.listQuery.page = 1
      // 复制一个对象<br>var obj = { a: 1 ,b:2};
      this.listQuery = Object.assign(this.listQuery, this.search)
      this.fetchData()
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      return new Promise((resolve, reject) => {
        api.userIndexApi(this.listQuery).then(response => {
          if (response.data.code === 0) {
            this.listData = response.data.data
            this.indexTop = response.data.top_total
            this.total = parseInt(response.data.total)
          }

          this.listLoading = false
        })
      })
    },

    // 获取站点的列表
    getUnitList() {
      api.selectOutleApi().then(response => {
        if (response.data.code === 0) {
          this.unitList = response.data.data
        }
      })
    }
  }
}
</script>
